<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <style>
        #app {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- animate类库 第三方动画  -->
    <!--duration动画持续时间 -->
    <!--:duration="1000" 出场和入场时长-->
    <!--:duration="{enter: 1000, leave: 5000}" 单独设置入场和离场持续时间-->
    <transition name="ani" enter-active-class="animate__animated animate__bounceInLeft"
                leave-active-class="animate__animated animate__bounceOutRight"
                :duration="{enter: 500, leave: 300}">
        <!-- v-show 显示/隐藏 -->
        <h2 v-show="flag">hello world</h2>
    </transition>

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            flag: true,
        },
        methods: {
        },
    });
</script>
</body>
</html>
